<template>
  <div class="team-config">
    <Form
      :model="formState"
      style="width: 1010px"
      :label-col="{ style: { width: '210px' } }"
      :wrapper-col="{ span: 16 }"
      autocomplete="off"
      label-align="right"
      :colon="false"
    >
      <FormItem
        class="JE_SYS_DEVMANAGER_NAME"
        :label="$t('team.admin')"
        name="JE_SYS_DEVMANAGER_NAME"
        v-bind="validateInfos.JE_SYS_DEVMANAGER_NAME"
      >
        <UserSelect
          v-model:value="formState.JE_SYS_DEVMANAGER_NAME"
          :select-options="{ title: $t('team.adminTtile'), showDeveloper: true }"
          class="middle-input"
          config-info=",JE_SYS_DEVMANAGER~JE_SYS_DEVMANAGER_NAME,id~text,M"
        />
      </FormItem>
      <FormItem class="JE_SYS_ADMIN" :label="$t('team.person')" name="JE_SYS_ADMIN_NAME">
        <UserSelect
          v-model:value="formState.JE_SYS_ADMIN_NAME"
          textarea
          :select-options="{ title: $t('team.adminTtile'), showDeveloper: true }"
          style="height: 180px"
          class="middle-input"
          config-info=",JE_SYS_ADMIN~JE_SYS_ADMIN_NAME,id~text,M"
        />
        <div class="text">
          <i>{{ $t('team.personTip') }}</i>
        </div>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  import { defineComponent, onUnmounted, reactive } from 'vue';
  import { Form, Modal, InputSelect } from '@jecloud/ui';
  import VueEvent from '@/helper/model/event';
  import { useOpenDialog } from '@/hooks';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  const useForm = Form.useForm;

  export default defineComponent({
    name: 'TeamConfig',
    components: {
      UserSelect: InputSelect.User,
      Form,
      FormItem: Form.Item,
      // eslint-disable-next-line vue/no-unused-components
      Modal,
    },
    props: {
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      // 表单信息
      const formState = reactive({
        JE_SYS_DEVMANAGER_NAME: '', // 开发者管理员
        JE_SYS_DEVMANAGER: '', // 开发者管理员id
        JE_SYS_ADMIN: '',
        JE_SYS_ADMIN_NAME: '超级管理员、刘旭、云凤程、刘利军、李飞、王金爽、吝智超',
      });
      let meta = {};
      let res = {};
      // 装换数据成formState类型
      const changeDataType = (parame) => {
        res = parame.filter((item) => {
          return item.code === 'team-config';
        });
        res[0]?.items.find((item) => {
          formState[item.code] = item['value'];
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType(props.dataAll);
      // 数据是否改变
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };
      // 判断是否跳转
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };
      // 依据formstate数据，判断是否允许离开
      const isSaveCallback = () => {
        if (isChange()) return changeBar();
        useOpenDialog({
          attribute: 'team-config',
          allFields: JSON.stringify(formState),
        });
      };

      // 必填校验
      const rulesRef = reactive({
        JE_SYS_DEVMANAGER_NAME: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
      });
      const { validate, validateInfos } = useForm(formState, rulesRef, {
        // onValidate: (...args) => console.log(...args),
      });

      // 保存的回调事件
      const clickCallback = () => {
        validate()
          .then(() => {
            if (!isChange()) {
              saveConfigData({
                attribute: 'team-config',
                allFields: JSON.stringify(formState),
                type: '',
              }).then(
                (meta = JSON.parse(JSON.stringify(formState))),
                Modal.notice('保存成功', 'success'),
                VueEvent.emit('saveResult', isChange()),
                VueEvent.emit('changeAllData', { item: 'team-config', formState }),
              );
            } else {
              // 如果显示了子页面就不提示
              Modal.notice('无数据操作!', 'info');
            }
          })
          .catch(() => {
            return false;
          });
      };
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('fadeScroll', onScroll);
      VueEvent.on('securityConfigCheck', clickCallback);
      onUnmounted(() => {
        VueEvent.off('securityConfigCheck', clickCallback);
        VueEvent.off('toolbarSaveEvent', clickCallback);
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('fadeScroll', onScroll);
      });

      return {
        formState,
        validateInfos,
      };
    },
  });
</script>

<style lang="less" scoped>
  .team-config {
    padding-top: 30px;

    .my-icon {
      font-size: 14px;
      margin-top: -5px;
    }
  }
</style>
